<template>
  <div :class="['invite',menuState||poop?'fixed':'']" @click="menuState=false">
    <div class="header">
      <div class="title">
        <img src="../../../assets/images/jdj_invite_tit.png">
      </div>
      <div class="poopSwitch" @click="poop=true">
        <i></i>
        <span>活动说明</span>
      </div>
    </div>
    <div class="main">
      <img src="../../../assets/images/jdj_invite_main.png">
    </div>
    <div class="footer">
      <div class="inner">
        <div class="title">
          <span>10个无门槛成为会员的名额，额满即止。
            <br>机会难得，且邀且珍惜！
          </span>
        </div>
        <div class="list">
          <li v-for="(item, index) in inviteList" :key="index">
            <i
              :class="item?'':'has'"
              :style="{backgroundImage:'url('+item||'static/images/jdj_invite_list_has.png'+')'}"
            ></i>
          </li>
          <li v-for="(item, index) in 10-inviteList.length" :key="index+inviteList.length">
            <i></i>
          </li>
        </div>
        <div class="button" @click.stop="toInvite">
          <span>马上邀请</span>
        </div>
      </div>
    </div>
    <div class="poop" v-show="poop">
      <div class="shadow" @click="poop=false"></div>
      <div class="inner">
        <h1>活动说明</h1>
        <ol>
          <li v-for="(item, index) in poopInfo" :key="index">
            <span>{{item}}</span>
          </li>
        </ol>
        <div class="button" @click="poop=false">
          <span>知道了</span>
        </div>
      </div>
    </div>
    <div class="texture">
      <i v-for="(item, index) in 4" :key="index"></i>
    </div>
    <div class="menu" v-show="menuState" @click="menuState=false"></div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import axios from "axios";
import store from "../../../store.js";
export default {
  data() {
    return {
      poop: false,
      menuState: false,
      configInfo: {},
      imgTemp:
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1871175656,4080161705&fm=27&gp=0.jpg",
      poopInfo: [
        "1.成功报名此次金犊奖-旺仔旺铺特别营销项的参赛者，以报名手机号登陆此链接，即可激活CEO会员身份。",
        "2.参赛者拥有10个无门槛邀请好友成为CEO会员的名额，点击马上邀请，即可分享链接給自己的潜力队友。好友完成注册，就能成为会员，和你一起推广。",
        "3.该活动邀请好友对象只针对非CEO会员",
        "4.10个名额用完后，参赛者仍可通过APP内的邀请好友链接进行招募，但好友需要购买礼包才能成为会员。",
        "5.参赛者邀请的每位好友成为会员后，好友推广的订单参赛者都能获得一定的奖励金。",
        "6.邀请的质量越高，团队效益越好哦！"
      ],
      wxApi: "http://www.hotkidclub.com/weixin_base/getJsapiConfig.ctrl",
      configData: {}
    };
  },
  computed: {
    serveAPI: {
      get() {
        let serve = {};
        let portAddress = store.state.apiPort.map(
          e => store.state.apiOrigin + e.split(":")[1]
        );
        let portName = store.state.apiPort.map(e => e.split(":")[0]);
        for (let i = 0; i < portName.length; i++) {
          serve[portName[i]] = portAddress[i];
        }
        return serve;
      },
      set() {}
    },
    inviteList: {
      get() {
        return store.state.inviteList;
      },
      set() {}
    },
    calfKey: {
      get() {
        return store.state.calfKey;
      },
      set() {}
    }
  },
  methods: {
    toInvite() {
      this.menuState = true;
    },
    init() {
      this.stemp();
    },
    stemp() {
      // alert('开始签名')
      axios
        .post(this.serveAPI.wxSDK, {
          url: window.location.href
        })
        .then(res => {
          // alert(JSON.stringify(res))
          // this.configInfo = res.data.object;
          // console.log(response.data.object);
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.object.appId, // 必填，公众号的唯一标识
            timestamp: res.data.object.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.object.noncestr, // 必填，生成签名的随机串
            signature: res.data.object.signature, // 必填，签名
            jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"] // 必填，需要使用的JS接口列表
          });
          this.config();
        });
    },
    config() {
      // alert('开始配置')
      wx.ready(() => {
        let shareData = {
          title: "邀请好友",
          desc:
            "我已成为旺仔旺铺的CEO，只用一键分享旺旺食品就能轻松赚钱。想邀你一起成为CEO，边吃边赚。",
          link: window.location.href.split("?")[0] + "?calfKey=" + this.calfKey,
          imgUrl:
            window.location.href.split("?")[0] + "static/images/shareImg.jpg",
          type: "",
          dataUrl: "",
          success: function() {},
          cancel: function() {},
          fail: function() {
            alert("分享失败");
          }
        };

        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline(shareData);
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang='stylus' scoped>
@import '../../../assets/styles/index.styl'
.invite {
  position relative
  width 100%
  overflow hidden
  background linear-gradient(to bottom, #f96561, #fd8a70, #ffaa80, #ffc6a7)
  background #ffa373
  min-height 100vh
  &.fixed {
    position fixed
  }
  .header {
    position relative
    z-index 3
    .title {
      padding 15px
      padding-top 5%
      padding-bottom 20px
    }
    .poopSwitch {
      transform translateY(-45px)
      position absolute
      right -2px
      background #fc8f88
      border 1px solid #feb6b1
      border-top-left-radius 20px
      border-bottom-left-radius 20px
      padding 5px 12px
      box-shadow 1px 1px 10px rgba(0, 0, 0, 0.15)
      span {
        font-size 14px
        color #fff
      }
      i {
        vertical-align middle
        position relative
        top -1px
        margin-right 3px
        display inline-block
        background-image url('../../../assets/images/jdj_invite_poop_icon.png')
        background-position center
        background-size contain
        background-repeat no-repeat
        height 13px
        width 12px
      }
    }
  }
  .main {
    position relative
    z-index 2
    margin-top -80px
  }
  .footer {
    position relative
    z-index 5
    margin-top -80px
    .inner {
      text-align center
      padding 15px 10%
      .title {
        color #fff
        font-size 14px
      }
      .list {
        margin 15px 0
        li {
          padding-bottom 13.5%
          width 13.5%
          margin-right 6.5%
          margin-top 3%
          display inline-block
          border-radius 50%
          position relative
          &:nth-child(1), &:nth-child(6) {
            margin-left 3.25%
          }
          &:nth-of-type(5n) {
            margin-right 0%
          }
          i {
            position absolute
            height 85%
            width 85%
            margin 0
            padding 0
            display inline-block
            background #f1f1f1
            border-radius 50%
            left 50%
            top 50%
            border 2px solid c12
            transform translate(-50%, -50%)
            background-image url('../../../assets/images/jdj_invite_list.png')
            background-position center
            background-size cover
            background-repeat no-repeat
            &.has {
              background-image url('../../../assets/images/jdj_invite_list_has.png') !important
            }
          }
        }
      }
      .button {
        background-image url('../../../assets/images/button.png')
        height 80px
        @media only screen and (max-height: BPH0) {
          height 60px
        }
        @media only screen and (max-height: BPH1) {
          height 70px
        }
        background-size contain
        background-repeat no-repeat
        background-position center
        display inline-block
        width 80%
        text-align center
        span {
          position relative
          top 25%
          transform translateY(-50%)
          font-size 20px
          color #fff
        }
      }
    }
  }
  .poop {
    .shadow {
      display inline-block
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      background rgba(0, 0, 0, 0.5)
      z-index 99
      height 100vh
    }
    .inner {
      position absolute
      z-index 100
      top 45%
      left 50%
      transform translate(-50%, -50%)
      background #fff
      border-radius 5px
      width 80%
      box-shadow 0 1px 3px rgba(26, 26, 26, 0.1)
      h1 {
        padding 25px 0
        font-size 18px
        color #fff
        text-align center
        background-image url('../../../assets/images/jdj_invite_poop_tit.png')
        background-size cover
        border-top-left-radius 5px
        border-top-right-radius 5px
      }
      ol {
        padding 15px 10px 10px
        li {
          font-size 12px
          margin-bottom 10px
        }
      }
      .button {
        text-align center
        border-top 1px solid rgba(0, 0, 0, 0.1)
        padding 15px 0
        color c2
      }
    }
  }
  .texture {
    i {
      position absolute
      z-index 0
      display block
      &:nth-child(1) {
        z-index 2
        height 350px
        width 350px
        background #ffaf6e
        border-radius 50%
        opacity 1
        top -220px
        left 50px
        display none
      }
      &:nth-child(2) {
        z-index 2
        width 100%
        height 60%
        background linear-gradient(to top, rgba(255, 125, 101, 1), rgba(255, 125, 101, 0))
        bottom 0
        left 0
      }
      &:nth-child(3) {
        z-index 2
        width 100%
        height 30%
        background linear-gradient(to bottom, rgba(247, 92, 89, 1), rgba(247, 92, 89, 0))
        top 0
        left 0
      }
      &:nth-child(4) {
        height 50px
        width 150px
        top -20px
        left -80px
        z-index 2
        background-image url('../../../assets/images/jdj_accept_texture_dec_1.png')
        background-size contain
        background-repeat no-repeat
        background-position center
        transform rotate(30deg)
        opacity 0.2
      }
    }
  }
  .menu {
    position fixed
    bottom 0
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.7)
    z-index 100
    background-image url('../../../assets/images/jdj_wx_guide.png')
    background-size 80% auto
    background-position right top
    background-repeat no-repeat
  }
}
</style>
